/* Copyright (c) Soon.Liao 2024. All rights reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * Create Date : 2024
 * @Date: 2024-10-14 07:57:06
 * @LastEditors: soon.liao
 * @LastEditTime: 2024-10-26 14:11:09
 * @FilePath: /src/application/ws63/rgb_master/wifi/html_page.h
 * @Description: NA
 * NA
 */
#ifndef HTML_PAGE_H
#define HTML_PAGE_H

// HTML 内容，包含自动跳转
static const char HTTP_HTML_HDR[] =
    "HTTP/1.1 200 OK\r\nContent-type: text/html\r\nCache-Control: public, max-age=3600\r\n\r\n";

// ledNum,ledNum,ledBrightness
static const char HTTP_HOME_PAGE_HTML[] =
    "<!DOCTYPE html>\n"
    "<html lang=\"zh-CN\">\n"
    "<meta name=\"viewport\" http-equiv=\"Cache-Control\" content=\"width=device-width, initial-scale=1.0,no-cache, "
    "no-store, must-revalidate\">\n"
    "<head>\n"
    "    <meta charset=\"UTF-8\">\n"
    "    <title>RGB Master设置</title>\n"
    "    <style>\n"
    "        body {\n"
    "            margin: 0;\n"
    "            padding: 20px;\n"
    "            background-color: #f4f4f4;\n"
    "        }\n"
    "        .container {\n"
    "            max-width: 600px;\n"
    "            margin: 0 auto;\n"
    "            background: #fff;\n"
    "            padding: 20px;\n"
    "            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n"
    "        }\n"
    "        h2 {\n"
    "            text-align: center;\n"
    "        }\n"
    "        .form-group {\n"
    "            margin-bottom: 15px;\n"
    "        }\n"
    "        .form-group label {\n"
    "            display: block;\n"
    "            margin-bottom: 5px;\n"
    "        }\n"
    "        .form-group input,\n"
    "        .form-group select {\n"
    "            width: 100%;\n"
    "            padding: 8px;\n"
    "            box-sizing: border-box;\n"
    "        }\n"
    "        .buttons {\n"
    "            display: flex;\n"
    "            justify-content: space-between;\n"
    "        }\n"
    "        .buttons button {\n"
    "            width: 48%;\n"
    "            padding: 10px;\n"
    "            font-size: 16px;\n"
    "            cursor: pointer;\n"
    "        }\n"
    "    </style>\n"
    "</head>\n"
    "<body>\n"
    "    <div class=\"container\">\n"
    "        <h1>WiFi和LED灯带设置</h1>\n"
    "        <h2>LED灯带控制</h2>\n"
    "        <form id=\"ledForm\" method=\"POST\">\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"toggleLed()\">开关</button>\n"
    "                <button type=\"button\" onclick=\"prevMode()\">上一个模式</button>\n"
    "                <button type=\"button\" onclick=\"nextMode()\">下一个模式</button>\n"
    "                <button type=\"button\" onclick=\"prevSence()\">上一个场景</button>\n"
    "                <button type=\"button\" onclick=\"nextSence()\">下一个场景</button>\n"
    "            </div>\n"
    "            <div class=\"form-group\">\n"
    "                <label for=\"ledBrightness\">LED亮度</label>\n"
    "                <input type=\"range\" id=\"ledBrightness\" name=\"ledBrightness\" min=\"0\" max=\"255\" "
    "step=\"1\" value=${brightnessValue} onchange=\"changeBrightness()\" required>\n"
    "                <span id=\"ledBrightnessValue\">${brightnessValue}</span>\n"
    "            </div>\n"
    "        </form>\n"
    "        <h2>LED灯带设置</h2>\n"
    "        <form id=\"ledCountForm\" method=\"POST\">\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"startSLE()\">开始SLE配对</button>\n"
    "                <button type=\"button\" onclick=\"clearSLE()\">清除SLE配对</button>\n"
    "            </div>\n"
    "            <div class=\"form-group\">\n"
    "                <label for=\"ledCount\">LED灯珠个数:</label>\n"
    "                <select id=\"ledCount\" name=\"ledCount\" required>\n"
    "                </select>\n"
    "            </div>\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"submitLEDCount()\">保存灯珠设置</button>\n"
    "            </div>\n"
    "        </form>\n"
    "        <h2>WiFi配置</h2>\n"
    "        <form id=\"wifiInfoForm\" method=\"POST\">\n"
    "            <div class=\"form-group\">\n"
    "                <label for=\"ssid\">WiFi SSID:</label>\n"
    "                <input type=\"text\" id=\"ssidInput\" name=\"ssid\" placeholder=\"Enter WiFi SSID\" required>\n"
    "                <label for=\"password\">WiFi 密码:</label>\n"
    "                <input type=\"password\" id=\"passwordInput\" name=\"password\" placeholder=\"Enter WiFi "
    "Password\" required>\n"
    "            </div>\n"
    "            <div class=\"buttons\">\n"
    "                <button type=\"button\" onclick=\"submitWifi()\">保存WiFi设置</button>\n"
    "                <button type=\"button\" onclick=\"clearWifi()\">清除WiFi设置</button>\n"
    "            </div>\n"
    "        </form>\n"
    "    </div>\n"
    "\n"
    "    <script>\n"
    "        const ledBrightness = document.getElementById(\'ledBrightness\');\n"
    "        const ledBrightnessValue = document.getElementById(\'ledBrightnessValue\');\n"
    "        var brightnessValue = 10;\n"
    "        var ledCountValue = 10;\n"
    "\n"
    "       async function getLEDNum() {\n"
    "           try {\n"
    "               const response = await fetch(\'/getLEDNum\', { method: 'GET' });\n"
    "               if (!response.ok) {\n"
    "                   throw new Error(\'Network response was not ok \' + response.statusText);\n"
    "               }\n"
    "               const data = await response.json();\n"
    //"               alert(\`LED灯珠个数数据 ${data}\`);\n"
    "               ledCount.value = data.ledCount;\n"
    "               ledCountValue = data.ledCount;\n"
    //"               alert(\`LED灯珠个数已更新 ${data.ledCount}\`);\n"
    "           } catch (error) {\n"
    "               console.error(\'There was a problem with the fetch operation:\', error);\n"
    "               ledCount.value = \'Error: \' + error.message;\n"
    "               alert(\'获取LED灯珠个数时出错\');\n"
    "           }\n"
    "       }\n"
    "\n"
    "       async function getBrightness() {\n"
    "           try {\n"
    "               const response = await fetch(\'/getBrightness\', { method: 'GET' });\n"
    "               if (!response.ok) {\n"
    "                   throw new Error(\'Network response was not ok \' + response.statusText);\n"
    "               }\n"
    "               const data = await response.json();\n"
    //"               alert(\`LED亮度数据 ${data}\`);\n"
    "               ledBrightnessValue.textContent = data.brightness;\n"
    "               ledBrightness.value = data.brightness\n"
    "               brightnessValue = data.brightness\n"
    //"               alert(\`LED灯带亮度已调节 ${data.brightness}\`);\n"
    "           } catch (error) {\n"
    "               console.error(\'There was a problem with the fetch operation:\', error);\n"
    "               ledBrightnessValue.textContent = \'Error: \' + error.message;\n"
    "               alert(\'获取LED亮度时出错\');\n"
    "           }\n"
    "       }\n"
    "\n"
    "        function generateLedCountOptions() {\n"
    "            const selectElement = document.getElementById(\'ledCount\');\n"
    "            for (let i = 1; i <= 254; i++) {\n"
    "                const optionElement = document.createElement(\'option\');\n"
    "                optionElement.value = i;\n"
    "                optionElement.text = i;\n"
    "                selectElement.appendChild(optionElement);\n"
    "            }\n"
    "            selectElement.value = ledCountValue;\n"
    "        }\n"
    "\n"
    "        window.onload = function() {\n"
    "            getLEDNum();\n"
    "            getBrightness();\n"
    "            generateLedCountOptions();\n"
    "        };\n"
    "\n"
    "        function submitLEDCount() {\n"
    "            var ledCountValue = document.getElementById(\"ledCount\").value;\n"
    "            if (!ledCountValue) {\n"
    "                alert(\"请输入有效的LED数量\");\n"
    "                return;\n"
    "            }\n"
    "            var jsonData = {\n"
    "                ledCount: ledCountValue\n"
    "            };\n"
    "            var jsonString = JSON.stringify(jsonData);\n"
    "            fetch(\'/submitLEDCount\', {\n"
    "                method: \'POST\',\n"
    "                headers: {\n"
    "                    \'Content-Type\': \'application/json\'\n"
    "                },\n"
    "                body: jsonString \n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED数量: ${ledCountValue}\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function toggleLed() {\n"
    "            fetch(\'/toggleLed\', {\n"
    "                method: \'POST\',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带开关状态翻转\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function prevMode() {\n"
    "            fetch(\'/prevMode\', {\n"
    "                method: \'POST\',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换上一个模式\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function nextMode() {\n"
    "            fetch(\'/nextMode\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换下一个模式\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "\n"
    "        function prevSence() {\n"
    "            fetch(\'/prevSence\', {\n"
    "                method: \'POST\',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换上一个场景\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function nextSence() {\n"
    "            fetch(\'/nextSence\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带切换下一个场景\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function changeBrightness() {\n"
    "            ledBrightnessValue.textContent = ledBrightness.value;\n"
    "            var jsonData = {\n"
    "                brightness: ledBrightness.value\n"
    "            };\n"
    "            var jsonString = JSON.stringify(jsonData);\n"
    "            fetch(\'/setBrightness\', {\n"
    "                method: \'POST\',\n"
    "                headers: {\n"
    "                    \'Content-Type\': \'application/json\'\n"
    "                },\n"
    "                body: jsonString \n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`LED灯带亮度已调节 ${ledBrightness.value}\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function submitWifi() {\n"
    "            var ssidValue = document.getElementById(\"ssidInput\").value;\n"
    "            var passwordValue = document.getElementById(\"passwordInput\").value;\n"
    "            if (!ssidValue || !passwordValue) {\n"
    "                alert(\"请输入有效的SSID 和密码\");\n"
    "                return;\n"
    "            }\n"
    "            var jsonData = {\n"
    "                ssid: ssidValue,\n"
    "                password: passwordValue,\n"
    "            };\n"
    "            var jsonString = JSON.stringify(jsonData);\n"
    "            fetch(\'/submitWifi\', {\n"
    "                method: \'POST\',\n"
    "                headers: {\n"
    "                    \'Content-Type\': \'application/json\'\n"
    "                },\n"
    "                body: jsonString \n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`ssid: ${ssidValue}\npassword: ${passwordValue}\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function clearWifi() {\n"
    "            fetch(\'/clearWifi\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`清除WIFI信息\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function startSLE() {\n"
    "            fetch(\'/startSLE\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`开始SLE配对\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "        function clearSLE() {\n"
    "            fetch(\'/clearSLE\', {\n"
    "                method: 'POST',\n"
    "            })\n"
    "            .then(response => response.json())\n"
    "            .then(data => {\n"
    "                alert(\`清除SLE配对\`);\n"
    "            })\n"
    "            .catch(error => console.error(\'Error:\', error));\n"
    "        }\n"
    "\n"
    "    </script>\n"
    "</body>\n"
    "</html>";

#endif